<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<title>首页</title>
<th:block th:replace="_fragments :: somehead"></th:block>
<th:block th:replace="_fragments :: blogjscss"></th:block>
</head>

<body>
	<!-- 导航栏 -->
	<nav th:replace="_fragments :: navmenu(1)"></nav>

	<!-- 中间内容 -->
	<div id="waypoint" class="fluid container m-padded-tb-large">
		<div class="ui container">
			<div class="ui top attached segment">
				<div class="ui  horizontal link list">
					<div class="item">
						<img th:src="@{${blog.user.avatar}}" alt=""
							class="ui avatar image">
						<div class="content">
							<a th:href="${blog.user.nickname}" class="header">BLU</a>
						</div>
					</div>
					<div class="item">
						<i class="calendar icon"></i><span
							th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd hh:mm:ss')}">2020-07-01</span>
					</div>
					<div class="item">
						<i class="eye icon"></i><span th:text="${blog.views}">5787</span>
					</div>
					<div class="item" th:if="${blog.recommend}">
						<i class="thumbs up orange outline icon"></i> <span style="color: orange">推荐</span>
					</div>
				</div>
			</div>
			<div class="ui attached segment">
				<!-- 图片区域 -->
				<img th:src="@{${blog.firstPicture}}" alt=""
					class="ui fluid rounded image">

			</div>
			<div class="ui attached padded segment">
				<!-- 内容 -->
				<div class="ui mini right aligned basic segment">
					<div class="ui orange label" th:text="${blog.flag}">原创</div>
				</div>
				<h2 class="ui center aligned header" th:text="${blog.title}">
					文章标题</h2>
				<!-- 文章内容 -->
				<div id="content"
					class="typo typo-selection js-toc-content m-padded-lr-responsive"
					th:utext="${blog.content}"></div>
				<!-- 标签 -->
				<div class="m-padded-lr-responsive">
					<div class="ui basic teal left pointing label"
						style="margin-top: 30px;" th:each="tag : ${blog.tags}"
						th:text="${tag.name}">标签</div>
				</div>
				<!-- 赞赏 -->
				<div class="ui center aligned basic segment">
					<button id="payButton" class="ui orange basic button">赞赏</button>
				</div>
				<div id="payQR" class="ui flowing popup transition hidden">
					<div class="ui orange basic label">
						<div class="ui images" style="font-size: inherit !important;">
							<div class="ui image">
								<img th:src="@{/images/wechat.jpg}" alt=""
									class="ui rounded bordered image" style="width: 120px;">
								<div>支付宝</div>
							</div>
							<div class="ui image">
								<img th:src="@{/images/wechat.jpg}" alt=""
									class="ui rounded bordered image" style="width: 120px;">
								<div>微信</div>
							</div>
						</div>
					</div>
				</div>



			</div>
			<div class="ui attached positive message">
				<!-- 博客信息 -->
				<div class="ui middle aligned grid">
					<div class="eleven wide column">
						<ul class="list">
							<li>作者：<a th:href="@{/about}"
								th:text="${blog.user.nickname}" target="_blank">BLU</a></li>
							<li>发表时间: <span
								th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd hh:mm:ss')}">2020-07-23</span></li>
							<li th:if="${blog.shareStatement}">版权声明：禁止转载</li>
						</ul>
					</div>
					<div class="five wide column">
						<img th:src="@{/images/wechat.jpg}" alt=""
							class="ui right floated rounded bordered image"
							style="width: 120px;">
					</div>

				</div>

			</div>
			<div class="ui bottom attached segment">
				<!-- 留言区域列表 -->
				<div id="comment-container" class="ui teal segment">
					<div th:fragment="commentList">
						<div class="ui comments" style="max-width: 100%;">
							<h3 class="ui dividing header">评论</h3>
							<div class="comment" th:each="comment : ${comments}">
								<a class="avatar"> <img th:src="@{${comment.avatar}}">
								</a>
								<div class="content">
									<a class="author" >
										<span class="m-teal" th:text="${comment.nickname}">Matt</span>
										<div class="ui mini teal label m-padded-mini" th:if="${comment.IsblogerComment}">博主</div>
									</a>
									<div class="metadata">
										<span class="date"
											th:text="${#dates.format(comment.createTime,'yyyy-MM-dd hh:mm')}">今天下午
											5:42</span>
									</div>
									<div class="text"  th:text="${comment.content}">太赞了！</div>
									<div class="actions">
										<a class="reply" data-commentid="1"
											data-commentnickname="Matt"
											th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"
											onclick="reply(this)">回复</a>
									</div>
								</div>
								<div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
									<div class="comment" th:each="reply : ${comment.replyComments}">
										<a class="avatar"> <img th:src="@{${reply.avatar}}">
										</a>
										<div class="content">
											<a class="author">
												<span class="m-teal" th:text="${reply.nickname}">Matt</span>
												<div class="ui mini teal label m-padded-mini" th:if="${reply.IsblogerComment}">博主</div>
												&nbsp;<span th:text="回复"></span>&nbsp;<span th:text="${reply.parentComment.nickname}" class="m-teal">@ BLU</span>
											</a>
											<div class="metadata">
												<span class="date"
													th:text="${#dates.format(reply.createTime,'yyyy-MM-dd hh:mm')}">今天下午
													5:42</span>
											</div>
											<div class="text" th:text="${reply.content}">太赞了！</div>
											<div class="actions">
												<a class="reply" data-commentid="1"
													data-commentnickname="Matt"
													th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}"
													onclick="reply(this)">回复</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>

				</div>

				<div id="comment-form" class="ui form">
					<input type="hidden" id="hiddenBlogId" name="blog.id"
						th:value="${blog.id}">
					<input type="hidden" name="parentCommentId" th:value="-1">

					<div class="field">
						<textarea id="comment-textarea" name="content" placeholder="请输入内容..."></textarea>
					</div>
					<div class="fields">
						<div class="field m-mobile-wide m-margin-bottom-tiny">
							<div class="ui left icon input">
								<i class="user icon"></i> <input type="text" placeholder="姓名" name="nickname" th:value="${session.user}!=null ? ${session.user.nickname}">
							</div>
						</div>
						<div class="field m-mobile-wide m-margin-bottom-tiny">
							<div class="ui left icon input">
								<i class="mail icon"></i> <input type="text" placeholder="邮箱" name="email" th:value="${session.user}!=null ? ${session.user.email}">
							</div>
						</div>
						<div class="field m-mobile-wide m-margin-bottom-tiny">
							<div class="ui left icon input">
								<button id="cancel-comment-btn" type="button"
									class="ui grey button m-mobile-wide">
									<i class="trash alternate outline icon"></i>取消
								</button>
								<button id="post-comment-btn" type="button"
									class="ui teal button m-mobile-wide">
									<i class="edit icon"></i>发布
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="toolbar" class="m-padded-tb-large  m-fixed m-right-bottom"
		style="display: none;">
		<div class="ui vertical icon buttons">
			<button type="button" id="tocbtn" class="ui teal button">目录</button>
			<a href="#comment-container" class="ui teal button">留言</a>
			<button class="ui wechat icon button">
				<i class="weixin icon"></i>
			</button>
			<div id="toTop-button" class="ui icon teal button">
				<i class="chevron up icon"></i>
			</div>
		</div>
	</div>

	<div id="toc-container" class="ui flowing popup transition hidden"
		style="width: 250px !important;">
		<!-- 生成的目录 -->
		<ol class="js-toc">

		</ol>
	</div>


	<div id="qrcode" class="ui wechatQR flowing popup transition hidden"
		style="width: 130px !important;">
		<!-- <img src="static/images/wechat.jpg" alt="" class="ui rounded image" width="100px"> -->

	</div>

	<br>
	<br>

	<footer th:replace="_fragments :: footer"></footer>

	<script th:inline="javascript">
		$('.m-menu-toggle').click(function() {
			$('.m-item').toggleClass('m-mobile-hide');
		});

		$('#payButton').popup({
			popup : $('#payQR.popup'),

			position : 'bottom center'
		})

		tocbot.init({
			//显示区
			tocSelector : '.js-toc',
			//内容源
			contentSelector : '.js-toc-content',
			//生成级别
			headingSelector : 'h1,h2,h3'
		})

		$('#tocbtn').popup({
			popup : $('#toc-container.popup'),
			on : 'click',
			position : 'left center'
		})

		$('.wechat').popup({
			popup : $('.wechatQR.popup'),
			on : 'hover',
			position : 'left center'
		})

		var serverurl = "http://192.168.43.227:8080";
		var blogId = document.getElementById("hiddenBlogId").value;
		var url = "/blog/" + blogId;

		var qrcode = new QRCode("qrcode", {
			text : serverurl + url,
			width : 100,
			height : 100,
			colorDark : "#000000",
			colorLight : "#ffffff",
			correctLevel : QRCode.CorrectLevel.H
		});

		$('#toTop-button').click(function() {
			$(window).scrollTo(0, 500);
		})

		var waypoint = new Waypoint({
			element : document.getElementById('waypoint'),
			handler : function(direction) {
				if (direction == 'down') {
					$('#toolbar').show(500)
				} else {
					$('#toolbar').hide(500)
				}
			}
		})

		$('.ui.form').form({
			fields : {
				content : {
					identifier : 'content',
					rules : [ {
						type : 'empty',
						prompt : '请输入评论内容'
					} ]
				},
				nickname : {
					identifier : 'nickname',
					rules : [ {
						type : 'empty',
						prompt : '请输入用户名'
					} ]
				},
				email : {
					identifier : 'email',
					rules : [ {
						type : 'email',
						prompt : '请填写正确的邮箱地址'
					} ]
				},
			}
		});

		$(function() {
			$('#comment-container').load("/comments/" + blogId)
		});

		$('#post-comment-btn').click(function() {
			var boo = $('.ui.form').form('validate form');
			if (boo) {
				console.log('校验成功');
				postComment();
			} else {
				console.log('校验失败');
			}
		})
		
		$('#cancel-comment-btn').click(function() {
			clearContent();
		})

		function postComment() {
			$('#comment-container').load("/comments", {

				"parentComment.id" : $("[name='parentCommentId']").val(),
				"blog.id" : $("[name='blog.id']").val(),
				"nickname" : $("[name='nickname']").val(),
				"email" : $("[name='email']").val(),
				"content" : $("[name='content']").val()
			}, function(responseTxt, statusTxt, xhr) {
				/* $(window).scrollTo($('#comment-container'), 500); */
				clearContent();
			});
		}

		function clearContent() {
			$("[name='content']").val("");
			$("[name='parentCommentId']").val(-1);
			$("[name='content']").attr("placeholder", "请输入内容...");
		}

		function reply(obj) {
			var commentId = $(obj).data('commentid');
			var commentNickname = $(obj).data('commentnickname');
			$("[name='content']").attr("placeholder", "@" + commentNickname)
					.focus();
			$("[name='parentCommentId']").val(commentId);
			$(window).scrollTo($('#comment-form'), 500);
		}
		
		
	</script>
</body>

</html>